<template>
    <div class="top">
        <div class="top-left">
            <div class="logo">
                <span>LOGO</span>
            </div>
            <div class="top-title">
                <p>智慧小区物业信息管理平台</p>
            </div>
        </div>
        <div class="top-right">
            <div class="community">
                <span>小区</span>
                <el-select v-model="value" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div class="notice">
                <img src="https://cdn7.axureshop.com/demo2024/2178128/images/%E7%89%A9%E7%AE%A1%E5%B9%B3%E5%8F%B0_start/u1596.svg"
                    alt="">
            </div>
            <div class="account">
                <img src="https://cdn7.axureshop.com/demo2024/2178128/images/%E7%89%A9%E7%AE%A1%E5%B9%B3%E5%8F%B0_start/u1439.svg"
                    alt="">

                <el-dropdown @command="handleCommand">
                    <p>{{ account }}</p>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="intro">个人信息</el-dropdown-item>
                        <el-dropdown-item command="b">退出</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>
        <!-- 查看个人信息 -->
        <el-dialog title="个人信息" :visible.sync="introDialog" width="30%" :before-close="introClose" class="introDialog">
            <!--修改密码 -->
            <el-dialog width="30%" title="内层 Dialog" :visible.sync="editPasswordDialog" append-to-body>
                <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
                    class="demo-ruleForm">
                    <el-form-item label="密码" prop="pass">
                        <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="checkPass">
                        <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号">
                        <el-input type="input" disabled v-model="intro.PhoneNumber" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="验证码" class="code" prop="code">
                        <el-input type="input" v-model="ruleForm.code" autocomplete="off"></el-input>
                        <p>获取验证码</p>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>

                </el-form>
            </el-dialog>
            <div class="introContent">
                <div class="intro-top">
                    <img src="https://cdn7.axureshop.com/demo2024/2178128/images/%E7%89%A9%E7%AE%A1%E5%B9%B3%E5%8F%B0_start/u1452.svg"
                        alt="">
                    <p>{{ intro.Account }}</p>
                </div>
                <ul class="intro-list">
                    <li>
                        <p class="intro-title">姓名</p>
                        <p class="intro-content">{{ intro.Name }}</p>
                    </li>
                    <li>
                        <p class="intro-title">密码</p>
                        <p class="intro-content">{{ intro.Password }}</p>
                        <el-button @click="editPasswordDialog=true" type="primary" size="small" icon="el-icon-edit" circle></el-button>
                    </li>
                    <li>
                        <p class="intro-title">联系电话</p>
                        <p class="intro-content">{{ intro.PhoneNumber }}</p>
                        <el-button type="primary" size="small" icon="el-icon-edit" circle></el-button>
                    </li>
                </ul>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="introClose">取 消</el-button>
                <el-button type="primary" @click="introClose = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                if (this.ruleForm.checkPass !== '') {
                    this.$refs.ruleForm.validateField('checkPass');
                }
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.ruleForm.pass) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        }
        return {
            options: [{
                value: '选项1',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶'
            }, {
                value: '选项3',
                label: '蚵仔煎'
            }, {
                value: '选项4',
                label: '龙须面'
            }, {
                value: '选项5',
                label: '北京烤鸭'
            }],
            value: '',
            //管理员账号
            account: '',
            introDialog: false,
            intro: {},
            editPasswordDialog: false,
            ruleForm: {
                pass: '',
                checkPass: '',
                code: ""
            },
            rules: {
                pass: [
                    { validator: validatePass, trigger: 'blur' }
                ],
                checkPass: [
                    { validator: validatePass2, trigger: 'blur' }
                ],
                code: [
                    {
                        required: true, message: '请输入验证码', trigger: 'blur'
                    }
                ]
            }
        }

    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        getIntro() {
            this.$axios.post('http://127.0.0.1/employee/someEmolyee', {
                account: localStorage.getItem('name')
            }, {
                headers: {
                    'Authorization': `Bearer ${localStorage.getItem('token')}`,
                    'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
                }
            }).then(res => {
                console.log(res.data);
                this.intro = res.data

            }).catch(err => {
                console.log(err);
            })
        },
        handleCommand(command) {
            if (command == 'intro') {
                this.getIntro()
                this.introDialog = true
            }else{
                localStorage.removeItem('name')
                localStorage.removeItem('token')
                localStorage.removeItem('id')
                this.$router.push('/login')
            }

        },
        introClose() {
            this.$confirm('确认关闭？')
                .then(_ => {
                    this.introDialog = false
                })
                .catch(_ => { });

        }
    },
    mounted() {
        this.account = localStorage.getItem('name')
    }
}
</script>

<style scoped>
.demo-ruleForm>>>.el-input {
    width: 240px;
}

.code>>>.el-form-item__content {
    display: flex;
    align-items: center;
}

.code p {
    border: 1px solid rgba(153, 153, 153, 1);
    border-radius: 8px;
    height: 35px;
    line-height: 35px;
    padding: 0 10px;
    color: #1e1e1e;
    margin-left: 20px;
}

.introContent {
    /* padding-left: 50px; */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 50px;
}

.intro-content {
    min-width: 130px;
    margin-right: 40px;
}


.intro-title {
    font-size: 14px;
    color: #333;
    min-width: 60px;
    margin-right: 20px;
}

.intro-top img {
    margin-right: 20px;
}

.intro-top {
    display: flex;
    align-items: center;
    font-size: 20px;
    margin-bottom: 40px;
}

.intro-list {
    display: block;
}

.intro-list li {
    margin-right: 0;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.top {
    height: 53px;
    background-color: rgba(255, 255, 255, 1);
    color: #666;
    display: flex;
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 0 50px;
}

.top-left,
.top-right,
.account {
    display: flex;
    align-items: center;
}

.logo span {
    color: #0079fe;
    font-size: 25px;
}

.top-title {
    font-size: 18px;
    margin-left: 30px;
}

.community span {
    font-size: 14px;
    margin-right: 12px;
}

.notice img {
    width: 19px;
    height: 19px;
    margin: 0 50px;
}

.account img {
    width: 28px;
    height: 28px;
    margin-right: 15px;
}

.account p {
    font-size: 12px;
}

input {
    outline: none;
}

.community>>>.el-input--suffix .el-input__inner {
    padding: 2px !important;
    width: 133px;
    height: 30px;
    font-size: 12px;
}

.community>>>.el-input__icon {
    line-height: inherit !important;
}

.community>>>.el-select .el-input.is-focus .el-input__inner {
    border-color: #DCDFE6 !important;
}

.community>>>.el-select .el-input__inner:focus {
    border-color: #DCDFE6 !important;
}
</style>